Vue.component("vcode",{
    props:["type","url","email","msg"],
    template:`
    <span style="display: flex; width: 100%; align-items: center; justify-content: space-between">
        <el-input v-model="vcode" style="width: 70%"></el-input>
        <img v-if="type=='image'" onclick="this.src='/vcode/image?'+new Date().getTime()"
         src="/vcode/image" style="height: 40px;width: 30%; cursor: pointer">
        <el-button v-else-if="type=='email'" @click="sendEmail" style="width: 30%">发送验证码</el-button>
    </span>
    `,
    data(){
        return {
            vcode:""
        }
    },
    methods:{
        sendEmail(){
            if(!this.email){
                this.$alert("请输入邮箱地址!");
                return;
            }
            axios.get(`/vcode/email?msg=${this.msg}&email=${this.email}`).then(res=>{
                this.$alert(res.data.msg);
            });
        }
    },
    created(){
        // 添加 axios 拦截器, 判断如果是指定的 URL 请求, 那么加入验证码
        axios.interceptors.request.use(
            (config)=>{
                // 判断是否要添加验证码
                if(this.url != config.url){
                    return config;
                }
                // 请求发送前的拦截方法
                if(!this.vcode){
                    this.$alert("请输入验证码");
                    throw new Error("请输入验证码");
                }
                console.info(config);
                if(config.method == 'get'){
                    // 在 url 地址中加入 vcode 参数
                    config.url += "&vcode=" + this.vcode;
                } else {
                    // 在 data 中加入参数, data 有格式的区别
                    // 表单
                    config.data += "&vcode=" + this.vcode;
                }
                // 返回 config 请求继续
                return config;
            },
            (error)=>{
                // 请求错误拦截方法
                return Promise.reject(error);
            });
    }
});